<!DOCTYPE html><!-- 文档声明 指定该文档的类型是什么 HTML5的文档声明-->
<html lang="en"><!-- 浏览器识别该文档时用什么语言 如果检测到英文可能会提示翻译 -->

<head>
    <!-- meta表示的设置源信息 -->
    <meta charset="UTF-8"><!-- 设置当期页面字符编码 UTF-8 -->
    <!-- 针对ie浏览器设置的 当使用ie访问时模拟edge去渲染 兼容性问题 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 完美视口 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>京东 亚洲最大的网上...</title>
</head>

<body>
    <!-- 标签的分类：
按照作用分：
块级标签：标签独占一行 无论多少内容 前后换行
行级标签：标签逐个摆放 直到摆不下才会换行然后再逐个摆放

按单双：双标签  单标签




-->


    <!-- 一、常见的块级标签 -->

    <!-- 1.标题 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 2.段落 p -->
    <p>
        这里是一个段落这里是一个段落
        这里是一个段落这里是一个段落这里是一个段落这里是一个段落这里是一个段落
    </p>
    <p>aaaaaaaaaaaa</p>


    <!-- 3.无序列表 -->
    <ul type="square">
        <li>香蕉</li>
        <li>橘子</li>
        <li>西瓜</li>
    </ul>

    <!-- 4.有序列表
    英文="值" 称为标签的属性   英文是属性名  值是属性值 一般用来表示标签的特殊用法
    -->
    <ol type="a">
        <li>香蕉</li>
        <li>橘子</li>
        <li>西瓜</li>
    </ol>

    <!-- 5.表单 
    name属性:表示当前表单元素的名字  当服务器想要获取表单内容是使用
    value属性：
        按钮中表示的是按钮的显示文字
        输入型框中表示框里的默认数据 当服务器通过name获取时获取的就是value
        在单选按钮中、复选框、下拉菜单中表示真实提交的值


        placeholder="请输入..." 提示输入文字
        disabled属性 禁用属性
        readonly属性  只读
        checked 默认选中单选按钮  复选框 的某个值
        selected 默认选中下框的某个值
    -->
    <form action="">
        <!-- 表单中有内容 表单元素 表单元素不是块级标签 -->
        用户名: <input type="text" name="username" placeholder="请输入..." disabled> <br>
        用户名: <input type="text" name="username" placeholder="请输入..." readonly> <br>
        密码: <input type="password" name="password" value="请输入..."> <br>
        隐藏域: <input type="hidden" value="10086"> <br>
        文件域: <input type="file" name="photo" value="photo"> <br>
        性别:
        <input type="radio" name="sex" value="man" checked>男
        <input type="radio" name="sex" value="women">女
        <br>
        爱好：
        <input type="checkbox" value="game" checked> 游戏
        <input type="checkbox" value="music"> 音乐
        <input type="checkbox" value="video"> 电影
        <br>
        普通按钮：<input type="button" value="点我">
        <!-- 按钮除了有input类的以外还一种双标签的可以在里面放文字或内容 -->
        <!-- <button>我是按钮</button> -->
        <br>
        图片按钮: <input type="image" src="imgs/1.png" width="50px" height="50px">
        <br>
        下拉框：
        <select name="city">
            <option value="大理">大理</option>
            <option>昆明</option>
            <option>丽江</option>
            <option selected>德宏</option>
        </select>

        <br>
        请输入你的评价：(多行文本域)
        <textarea></textarea>
        <br>

        <!-- 其他新的表单元素  可能存在兼容性问题 -->
        <input type="number">
        <br>
        <input type="week">
        <br>
        <input type="date">
        <br>
        <input type="datetime-local">
        <br>
        <input type="color">
        <br>
        <input type="range">
        <br>
        <input>

        <input type="submit" value="确定"><!-- 提交按钮 -->
        <input type="reset"><!-- 重置按钮 -->

    </form>

    <hr>
    <hr>
    <hr>
    <hr>
    <hr>

    <!-- 6.表格 -->
    <table border="1" width="800px" height="500px" align="center"
        style="text-align: center; border-collapse: collapse;">
        <!-- 行 -->
        <tr>
            <td colspan="2">第一行第一列</td>
        </tr>
        <tr>
            <td rowspan="2">第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <tr>

            <td>
                <table border="1" align="center" style="text-align: center; border-collapse: collapse;">
                    <!-- 行 -->
                    <tr>
                        <td colspan="2">第一行第一列</td>
                    </tr>
                    <tr>
                        <td rowspan="2">第二行第一列</td>
                        <td>第二行第二列</td>
                    </tr>
                    <tr>

                        <td>

                        </td>
                    </tr>

                </table>
            </td>
        </tr>

    </table>

    <!-- 7.div 区块标签 主要用来做布局的容器 -->


    <div style="width: 500px; height: 500px; background-color: aqua;">
        <div style="width: 100px; height: 100px; background-color: red;">
            <div style="width: 50px; height: 50px; background-color: yellow;">

            </div>
        </div>
    </div>


    <!-- 二、行级标签 -->
    <!-- 1.范围标签 span -->
    <span>你好</span><span>zs</span><span>zs</span>
    <span>zs</span><span>zs</span><span>zs</span><span>zs</span><span>zs</span>
    <!-- 一般如果一段文字某个文字需要设置样式 -->
    <p>今天水果大促销全部<span style="color: red; font-size: 150px;">9.9</span></p>
    <br><br>

    <!-- 2.换行标签 -->
    <br>

    <input type="text"><input type="text">
    <br>
    <!-- 3.图片标签
    src="" 表示需要引入图片的位置
    alt="" 表示的是当图片加载失败时提示的文字
    title=""鼠标悬浮图片的提示文字
    -->
    <img src="imgs/1.png" alt="图片破损" title="这里是一个小球" width="150px" height="150px">
    <img src="imgs/1.png" alt="图片破损" title="这里是一个小球" style="width: 200px; height: 200px;">
    <!-- <img src="imgs/1.png" alt="图片破损">
    <img src="imgs/1.png" alt="图片破损">
    <img src="imgs/1.png" alt="图片破损"> -->

    <!-- 4.超链接 是一个功能连接 用来负责页面资源的跳转 -->
    <a href="#">超链接</a><!-- 做网页时如果暂时不知道跳转到哪里用#代替 -->
    <a href="http://www.baidu.com">百度</a>
    <!-- 超链接除了连接网址还可以连接文件 如果文件浏览支持 就打开  不支持就下载 -->
    <a href="mp3/1.mp3">链接音乐</a>
    <a href="video/mi.mp4">链接视频</a>
    <a href="others/测试文件.rar">链接文件</a>
    <hr>
    <!-- 
target用于控制连接打开资源的目标位置
_bank 在空白的页面打开
_self 在现在的自身页面打开
_top 在当前网页的顶层框架打开
_patent 在原来的父容器中打开

     -->
    <a href="http://www.baidu.com" target="_parent">百度</a>

    <a href="mailto:123@qq.com">联系站长</a>
    <!-- 锚链接 通过#a标签的名字找到网页中某块内容 -->
    <a href="#zjl">aa</a>

    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>

    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>

    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>  
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>好好学习<a name="zjl">周杰伦</a></p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <p>asfjkladsfjldaksf</p>
    <a href="#">↑</a><!-- 默认没有连接地址的超链接可以直接去到页面顶部 -->


</body>

</html>